<template>
  <div class="main">
    <el-table
      :data="tableData"
      border
      style="width: 40%; flex: initial; margin-right: 50px"
      :row-class-name="tableRowClassName"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="reservationId" label="订单号" width="60" align="center">
      </el-table-column>
      <el-table-column prop="reservationName" label="患者姓名" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="diagnosticCreateTime"
        label="订单生成时间"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="reservationItemResultComeout"
        label="是否出结果"
        align="center"
        width="100"
      >
        <template slot-scope="{ row }">
          <span>{{ row.reservationItemResultComeout ? "已出" : "未出" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.reservationItemResultComeout"
            type="primary"
            plain
            @click="getHisDetail(row)"
            >查看</el-button
          >
          <el-button v-else type="primary" plain @click="getHisDetail(row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button class="next" type="success" @click="getNext">下一位病人</el-button>
    <el-tabs
      v-model="tabName"
      type="border-card"
      tab-position="left"
      style="height: 600px; flex: 1"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-tab-pane
        v-for="(item, index) in tabPanList"
        :key="item.itemId"
        :name="String(index)"
        :label="item.itemName"
      >
        <div class="top">
          <p class="title">项目名称:{{ item.itemName }}</p>
          <p v-show="clickName">{{ clickName }}</p>
          <p></p>
        </div>
        <div style="min-height: 300px">
          <el-table
            :data="item.measureResultList"
            border
            :show-header="false"
            style="width: 100%; margin: 50px 0 20px"
          >
            <el-table-column
              prop="measureKindId"
              label="measureKindId"
              align="center"

            >
            </el-table-column>
            <el-table-column
              prop="measureKindName"
              label="measureKindName"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="measureResult"
              label="measureResult"
              align="center"
            >
              <template slot-scope="{row}">
                <el-input v-model="row.measureResult" :disabled="btnDisabled" />
              </template>
            </el-table-column>
            <el-table-column
              prop="measureKindUnits"
              label="measureKindUnits"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>

        <el-form :model="item" ref="ruleForm" label-width="100px">
          <el-form-item label="诊断结果：" prop="result">
            <el-input v-model="item.diagnosticResult" :disabled="btnDisabled" />
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button
            type="primary"
            style="margin-right: 60px"
            :disabled="btnDisabled"
            @click="saveOrder('saveDiagnostic')"
            >保存</el-button
          >
          <el-button
            type="primary"
            :disabled="btnDisabled"
            @click="saveOrder('submitDiagnostic')"
            >提交</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      clickName: '',
      tabName: '0',
      tableData: [],
      tabPanList: [],
      doctorinfo: {
        doctorId: '',
        departmentId: '',
        roomId: '',
        reservationId: ''
      },
      ruleForm: {
        result: '血脂异常'
      }
    }
  },
  computed: {
    btnDisabled() {
      const index = this.tableData.findIndex(item => item.reservationId == this.doctorinfo.reservationId)
      return index >= 0 && !!this.tableData[index].reservationItemResultComeout
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$emit("generateTab", "诊断管理", "医生诊断")
      this.doctorinfo.doctorId = JSON.parse(localStorage.getItem("doctor")).doctorId
      this.getHistoryList()
      this.request.get("doctor/getDoctorInfo?doctorId=" + this.doctorinfo.doctorId).then(res => {
        if (res.code == "200") {
          let tab = res.data.doctor
          const { departmentId, roomId } = tab
          this.doctorinfo.departmentId = departmentId
          this.doctorinfo.roomId = roomId
          let reservationId = ''
        }
        else {
          this.$message.error("数据失败！");
        }
      })
    },
    getHisDetail(row) {
      const { reservationId, reservationName } = row
      if(reservationName) this.clickName = reservationName
      this.doctorinfo.reservationId = reservationId
      this.tabName = '0'
      this.request({
        url: '/doctor/getDiagnosticInfo',
        method: 'get',
        params: {
          reservationId,
          doctorId: this.doctorinfo.doctorId
        }
      }).then(res => {
          console.log('我进了')
          this.tabPanList = res.data.data
      })
    },
    getNext() {
      const { departmentId, roomId } = this.doctorinfo
      this.request({
        url: '/scan/queueNext',
        method: 'post',
        params: {
          departmentId,
          roomId
        }
      }).then(res => {
        if (res.data.queueNext) {
          this.doctorinfo.reservationId = res.data.queueNext
          localStorage.setItem('reservationId', res.data.queueNext)
          this.getPanList(res.data.queueNext)
        }else{
          this.$message.success('暂无病人')
        }
      })
    },
    getHistoryList() {
      this.request({
        url: '/doctor/getHistoryDiagnostic',
        method: 'get',
        params: {
          doctorId: this.doctorinfo.doctorId
        }
      }).then(res => {
        if (res.data) this.tableData = res.data
      })
    },
    getPanList(reservationId) {
      this.request({
        url: '/doctor/getDepartmentItem',
        method: 'get',
        params: {
          reservationId,
          doctorId: this.doctorinfo.doctorId
        }
      }).then(res => {
        this.tabPanList = res.data.data
        this.clickName=res.data.reservationName
      })
    },
    tableRowClassName({ row }) {
      if (row.reservationItemResultComeout === 0) {
        return 'warning-row';
      }
      return '';
    },
    async saveOrder(str) {
      const { reservationId, doctorId } = this.doctorinfo
      const parmas = {
        reservationId,
        doctorId,
        data: this.tabPanList
      }
      this.request({
        url: '/doctor/' + str,
        method: 'post',
        data: parmas
      }).then(async res => {
        if (res.data) {
          await this.getHistoryList()
          this.$message.success((str == 'submitDiagnostic' ? '提交' : '保存') + "成功");
        } else {
          this.$message.error((str == 'submitDiagnostic' ? '提交' : '保存') + "失败");
        }
      })
    }
  }
}
</script>

<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}
.main {
  padding: 50px 20px;
  display: flex;
  justify-content: space-between;
}
::v-deep .el-tabs__item {
  height: 80px;
  line-height: 80px;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.next{
  position: fixed;
  right: 4%;
  top: 12%;
}
.btn {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
::v-deep .warning-row {
  background: oldlace;
}

::v-deep .success-row {
  background: #f0f9eb;
}
</style>